import React, { Component } from 'react';
import { Button } from 'antd';
import { WeaTop, WeaDialog, WeaLocaleProvider, WeaNewScroll, WeaTab, WeaRightMenu } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { WeaTableNew, WeaLogView } from 'comsMobx';
import EditUnit from '../components/EditUnit/EditUnit';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaLogViewComp = WeaLogView.Component;
const WeaTable = WeaTableNew.WeaTable;

@inject('unitSetStore')
@observer

export default class UnitSetPage extends Component {
  constructor(props) {
    super(props);
    this.getUnitForm = this.getUnitForm.bind(this);
    this.saveTreeData = this.saveTreeData.bind(this);
  }

  componentDidMount () {
    const { unitSetStore } = this.props;
    unitSetStore.getTableList();
    unitSetStore.getBaseInfo();
    unitSetStore.getSearchForm();
    unitSetStore.getCompanyLogType();
  }

  componentWillUnmount () {
    const { unitSetStore } = this.props;
    unitSetStore.setUnitIdArr();
    unitSetStore.companyAdmin = false;
  }

  getColumns = (columns) => {
    const { unitSetStore } = this.props;
    return columns.map((col) => {
      if (col.dataIndex == 'company_name') {
        return {
          ...col,
          title: col.title,
          className: '',
          render: (text, record) => (
            <a style={{ color: '#4D7AD8' }} onClick={() => unitSetStore.operate(record, '', '', unitSetStore.selectedKey)} >{text}</a>
          ),
        };
      }
      return col;
    });
  }

  // 获取新建单位的form
  getUnitForm () {
    const { unitForm } = this.props.unitSetStore;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9t0wln`} ref="scroll" className="newUnit">
        {unitForm.render()}
      </WeaNewScroll>
    );
  }

  // 获取搜索框
  getSearchForm () {
    const { unitSetStore } = this.props;
    const { searchForm } = this.props.unitSetStore;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@g7x5w9`} ref="scroll" className="newUnit">
        {searchForm.render({}, {
          onEnterSearch: () => unitSetStore.getTableList(),
        })}
      </WeaNewScroll>
    );
  }

  // 获取tab的按钮
  getTabButtons () {
    const { unitSetStore } = this.props;
    let btns = [];
    if (!unitSetStore.companyAdmin) {
      btns = [
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w0wb9l@create`} type="primary" onClick={() => unitSetStore.showDialog()}>{getLabel('503165', '新建系统')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oicuwx@batchDelete`} type="primary" disabled={unitSetStore.unitIdArr.length == 0} onClick={() => unitSetStore.deleteTip()}>{getLabel(32136, '批量删除')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nyfagg@log`} type="primary" onClick={() => { unitSetStore.logShow = true; }} >{getLabel(83, '日志')}</Button>,
      ];
    }
    return btns;
  }

  // 获取高级搜索框的操作按钮
  getSearchFormButtons () {
    const { unitSetStore } = this.props;
    const searchbutton = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h0ywhs@search`} type="primary" onClick={() => unitSetStore.getTableList()}>{getLabel(388113, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@81uh5m@reset`} type="ghost" onClick={() => { unitSetStore.searchForm.resetForm(); }}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@26yuou@Cancel`} type="ghost" onClick={() => { unitSetStore.setShowSearchAd(); }}>{getLabel(31129, '取消')}</Button>,
    ];
    return searchbutton;
  }

  // 获取编辑单位的保存按钮
  getEditUnit () {
    const { unitSetStore } = this.props;
    const display = toJS(unitSetStore.selectedKey) == '2' || toJS(unitSetStore.selectedKey) == '4' ? 'none' : 'block';
    let saveButtons = [
      <div style={{ height: '30px' }}>
        <div style={{ display }}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@in6mdg@save`}
            type="primary"
            onClick={() => unitSetStore.saveDialog(this.saveTreeData)}
          >{getLabel(30986, '保存')}</Button>
        </div>
      </div>,
    ];
    return saveButtons;
  }

  getRightMenu () {
    const { unitSetStore } = this.props;
    const { companyAdmin, showDialog, unitIdArr, deleteTip, showLog, getTableList } = unitSetStore;
    const disabled = unitIdArr.length == 0;
    const rightMenuDatas = [{
      key: '4',
      disabled: false,
      icon: <i className="icon-coms-search" />,
      content: getLabel('388113', '搜索'),
      onClick: () => getTableList(),
    }];
    if (!companyAdmin) {
      rightMenuDatas.push(
        {
          key: '1',
          disabled: false,
          icon: <i className="icon-coms-Add-to" />,
          content: getLabel('503165', '新建系统'),
          onClick: () => showDialog(),
        },
        {
          key: '2',
          disabled,
          icon: <i className="icon-coms-form-delete" />,
          content: getLabel('32136', '批量删除'),
          onClick: () => deleteTip(),
        },
        {
          key: '3',
          disabled: false,
          icon: <i className="icon-coms-Print-log" />,
          content: getLabel('83', '日志'),
          onClick: () => showLog(),
        },
      );
    }

    return rightMenuDatas;
  }

  render () {

    const { unitSetStore } = this.props;
    const addButtons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rnliga@save`} type="primary" onClick={() => unitSetStore.onCheck(unitSetStore.unitForm, 'saveObj')} >{getLabel(30986, '保存')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zwz0px@saveAndDetail`} type="primary" onClick={() => unitSetStore.onCheck(unitSetStore.unitForm, 'saveAndSet')}>{getLabel('387612', '保存并进入配置')}</Button>,
    ];
    const tableStore = unitSetStore.mainTable.tableStore;
    const company_name = unitSetStore.searchForm.getFormParams().company_name;
    return (
      <div className="unitset">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@hzn3tl`} datas={this.getRightMenu()} >
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@my39ot`}
            title={<span style={{ color: '#333' }}>{getLabel(16686, '系统设置')}</span>}
            buttons={this.getTabButtons()}
            icon={<i className="icon-coms-danweishezhi" />}
            iconBgcolor="#0079DE"
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ollmm3`}
              searchType={['base', 'advanced']}
              showSearchAd={unitSetStore.showSearchAd}
              setShowSearchAd={() => {
                unitSetStore.setShowSearchAd();
              }}
              buttonsAd={this.getSearchFormButtons()}
              searchsAd={this.getSearchForm()}
              advanceHeight={120}
              onSearch={text => unitSetStore.getTableList(text)}
              searchsBaseValue={company_name}
              onSearchChange={(v) => {
                unitSetStore.searchForm.updateFields({ company_name: { value: v } }, false);
              }}
            />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8ysezj`}
              getColumns={this.getColumns}
              comsWeaTableStore={tableStore}
              hasOrder={true}
              needScroll={true}
              rowSelection={{
                selectedRowKeys: unitSetStore.unitSelectedRowKeys,
                onChange: unitSetStore.onRowSelect,
              }}
              onOperatesClick={unitSetStore.operate}
              key={unitSetStore.rerender}
            />
          </WeaTop>
        </WeaRightMenu>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8dv33n`}
          title={getLabel('503165', '新建系统')}
          visible={unitSetStore.addDialogVisable}
          style={{ width: '500px', height: 'auto' }}
          onCancel={() => unitSetStore.hideAddDialog()}
          buttons={addButtons}
          needScroll={true}
          icon={'icon-coms-danweishezhi'}
        >
          {this.getUnitForm()}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5eo7iv`}
          title={getLabel('503166', '编辑系统')}
          visible={unitSetStore.EditdialogVisable}
          style={{ width: '1000px', height: '600px' }}
          onCancel={() => unitSetStore.hideEditDialog()}
          buttons={this.getEditUnit()}
          icon={'icon-coms-danweishezhi'}
        >
          <EditUnit ecId={`${this && this.props && this.props.ecId || ''}_EditUnit@x6rxu3`} ref="editUnit" />
        </WeaDialog>

        {/* 日志 */}
        <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@9yyii9`}
          visible={unitSetStore.logShow}
          onCancel={() => {
            unitSetStore.logShow = !unitSetStore.logShow;
            unitSetStore.unitId = '';
            unitSetStore.selectedKey = '0';
          }}
          logStore={unitSetStore.logStore}
          logType={unitSetStore.logType}
          logSmallType={unitSetStore.logSmallType}
          targetId={unitSetStore.unitId}
        />

      </div>
    );
  }

  saveTreeData () {
    this.refs.editUnit.wrappedInstance.saveTreeData();
  }
}
